{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}IP地址{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       IP地址管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">IP地址管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action={% url 'ipaddress' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">IP</label>
                  <textarea id='name' rows='1' class="form-control" name='name'></textarea>
                </div>
                <div class="col-xs-2">
                  <label for="search">网段</label>
                  <input type="text" class="form-control" name='ipnet'>
                </div>
                <div class="col-xs-2">
                  <label for="search">运营商</label>
                  <input type="text" class="form-control" name='isp'>
                </div>
                <div class="col-xs-3">
                  <label for="search">客户名称</label>
                  <input type="text" class="form-control" name='ipaddress_customer'>
                </div>
                <div class="col-xs-2">
                  <label for="search">VLAN</label>
                  <input type="text" class="form-control" name='vlan'>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">状态</label>
                  <select class="form-control" name='ipaddress_status' id='ipaddress_status'>
                    <option selected value></option>
                    <option value='0'>运营</option>
                    <option value='1'>待分配</option>
                    <option value='2'>已分配</option>
                    <option value='3'>保留</option>
                  </select>
                </div>
              </div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="ipaddress_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>IP</th>
              <th>网关</th>
              <th>运营商</th>
              <th>状态</th>
              <th>客户名称</th>
              <th>分配设备</th>
              <th>网段</th>
            </tr>
            </thead>
            <tbody>
                {% for ipaddress in ipaddress %}
                <tr>
                  <td id="ipaddress_name"><a href="{% url 'ipaddressdetail' ipaddress.id %}" target=_blank >{{ ipaddress.name }}</td>
                  <td>{{ ipaddress.ipnet.gw_ip }}</td>
                  <td>{{ ipaddress.ipnet.isp }}</td>
                  <td>{{ ipaddress.get_ipaddress_status_display }}</td>           
                  <td>{{ ipaddress.ipaddress_customer }}</td>
                  <td>{% if ipaddress.asset.asset_type == 'server' %}
                      <a href="{% url 'serverdetail' ipaddress.asset.id %}" target=_blank>
                      {% elif ipaddress.asset.asset_type == 'networkdevice' %}
                      <a href="{% url 'networkdevicedetail' ipaddress.asset.id %}" target=_blank>
                      {% endif %} 
                      {{ ipaddress.asset|default:'' }}
                  </td>
                  <td><a href="{% url 'ipnetdetail' ipaddress.ipnet.id %}" target=_blank>{{ ipaddress.ipnet }}</td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}

            </tbody>
          </table>
         </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <script src="../static/js/myjs.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/buttons.dataTables.min.css' %}">
    <!-- page script -->
    <script>
    $(document).ready(function() {
    $('#ipaddress_table').DataTable( {
        dom: 'lBfrtip',
        buttons: [
        {
            extend: 'excel',
            text: '导出当前页',
            exportOptions: {
                columns: ':visible',
                modifier: {
                    page: 'current'
                }
            }
        },
        {
            extend: 'excel',
            text: '导出所有',
            exportOptions: {
                columns: ':visible',
            }    
        }
    ],
    "columnDefs": [
  ]
    } );
} );
</script>
<script>
  var name = getUrlParameter('name');
  $("#name").val(name);
  var isp = getUrlParameter('isp');
  $("input[name='isp']").val(isp);
  var gw_ip = getUrlParameter('gw_ip');
  $("input[name='gw_ip']").val(gw_ip);
  var ipaddress_customer = getUrlParameter('ipaddress_customer');
  $("input[name='ipaddress_customer']").val(ipaddress_customer);
  var vlan = getUrlParameter('vlan');
  $("input[name='vlan']").val(vlan);
  var ipnet = getUrlParameter('ipnet');
  $("input[name='ipnet']").val(ipnet);
  var ipaddress_status = getUrlParameter('ipaddress_status');
  $("#ipaddress_status").val(ipaddress_status)
</script>
{% endblock %}
